<template>
	<uni-section class="cardCon" :title="'交易ID:' + item.id" type="line" v-for="(item, index) in tradeData">
		<view class="tradeSpPic"><image style="width: 500rpx;height: 500rpx;" mode="aspectFill" :src="staticSp + item.pic"></image></view>
		<view class="tradeInfo">商户:{{item.username}}</view>
		<view class="tradeInfo">款号:{{item.ddkh}}</view>
		<view class="tradeInfo">品名:{{item.spName}}</view>
		<view class="tradeInfo">数量:{{item.number}}</view>
		<view class="tradeInfo">出账:{{item.isOut}}</view>
		<view class="inputList">
			<input class="tradePrice" placeholder="请输入价格" v-model="tradeData[index]['price']"/><button @click="openAlert(index)" class="tradeBtn" >提交</button>
		</view>
	</uni-section>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" :title="'确认价格为:' + this.tradeData[this.index]['price'] + '元'" @confirm="giveTradePrice()" @close="closeAlert()"></uni-popup-dialog>
	</uni-popup>
</template>

<script>
import config from '../../../utils/config.js'
export default{
	onLoad(){
		this.getTradeNoPrice()
	},
	data(){
		return{
			tradeData:[],
			staticSp: config.staticSp,
			index: 0,
		}
	},
	methods:{
		// 查询没有价格的交易
		getTradeNoPrice(){
			let that = this
			this.request({
				url: config.baseUrl + "/wx/getTradeNoPrice",
			}).then(res => {
				that.tradeData = res.data
			})
		},
		// 打开提示框
		openAlert(index){
			this.index = index
			this.$refs.alertDialog.open()
		},
		// 关闭提示框
		closeAlert(){
			this.index = 0
			this.$refs.alertDialog.close()
		},
		// 修改价格
		giveTradePrice(){
			let that = this
			this.request({
				url: config.baseUrl + "/wx/giveTradePrice",
				data:{
					'id': that.tradeData[that.index]['id'],
					'price': that.tradeData[that.index]['price']
				},
			}).then(res => {
				that.getTradeNoPrice()
			})
		},
		
	}
}
</script>

<style lang="scss">
	.cardCon{
		background-color: white;
		margin-bottom: 50rpx; 
	}
	.tradeSpPic{
		text-align: center;
	}
	
	.tradeInfo{
		margin-left:20rpx;
		margin-top: 10rpx;
		font-size: 40rpx;
	}
	.inputList{
		margin: 20rpx;
		.tradePrice{
			border: 1px solid #bbb;
			border-radius: 20rpx;
			padding: 20rpx;
			width: 400rpx;
			display: inline-block;
		}
		.tradeBtn{
			width: 250rpx;
			display: inline-block;
			margin-left: 10rpx;
			border: 1px solid #bbb;
			border-radius: 20rpx;
			background-color: #e08020;
			color: #000;
		}
	}

</style>